import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
const mapStateToProps = state => {
  return {
    carts: state.carts
  };
};
class Mine extends Component {
  render() {
    const { carts } = this.props;
    return (
      <div>
        {carts.length > 0 ? (
          carts.map(val => (
            <div key={val.id} style={{ padding: '0 15px' }}>
              <div
                style={{
                  lineHeight: '50px',
                  color: '#888',
                  fontSize: 18,
                  borderBottom: '1px solid #F6F6F6'
                }}
              >
                {val.name}
              </div>
              <div
                style={{
                  display: '-webkit-box',
                  display: 'flex',
                  padding: '15px 0'
                }}
              >
                <img
                  style={{ height: '64px', marginRight: '15px' }}
                  src={val.img}
                  alt=""
                />
                <div style={{ lineHeight: 1 }}>
                  <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
                    {val.text}
                  </div>
                  <div>
                    <span style={{ fontSize: '30px', color: '#FF6E27' }}>
                      {val.price.number}
                    </span>
                    ¥ {val.id}
                  </div>
                </div>
              </div>
              <div>
                <span style={{ fontSize: '20px', color: '#FF6E27' }}>
                  {'总价:' + val.subTotal}
                </span>
                {'数量:' + val.quantity}
              </div>
            </div>
          ))
        ) : (
          <div>
            <h2>购物车暂无商品</h2>
            <NavLink to="/list">
              <h3>去购物</h3>
            </NavLink>
          </div>
        )}
      </div>
    );
  }
}
export default connect(mapStateToProps)(Mine);
